import React, {useState, useRef, useEffect} from 'react';
import { StyleSheet, Text, View, SafeAreaView, SectionList, Image } from 'react-native';
import Constants from 'expo-constants';
import GoodsOperation from './GoodsOperation';
import SkuModal from './SkuModal';



const Item = ({ item, handleShopListChange, count, toggleModal }) => {
    return (
        <View style={styles.item}>
            <Image style={styles.itemCover} source={{ uri: item.url }} />
            <View style={styles.itemRight}>
                <Text style={styles.itemName}>{item.name}</Text>
                <View style={styles.itemPriceContainer}>
                    <Text style={styles.itemPrice}>${item.price}{item.skuList.length === 0 ? '' : '起'}</Text>
                    <GoodsOperation toggleModal={toggleModal} count={count} item={item} handleShopListChange={(id, count, price) => handleShopListChange(id, count, price)} />
                </View>
            </View>
        </View>
    )
};

export default function GoodsList(props) {
    const shopList = props.shopList
    const goodsList = props.goodsList
    let sectionList = null 
    const [modalVisible, setModalVisible] = useState(false);
    const [modalData, setModalData] = useState([])
    useEffect(() => {
        if(sectionList){
            sectionList.scrollToLocation({
                sectionIndex: goodsList.findIndex(item => item.id === props.typeId),
                itemIndex: 0,
                viewOffset: 0
            })
        }
    }, [props.typeId])
    const handleShopListChange = (id, count, price) => {
        props.handleShopListChange(id, count, price)
    }
    const computeCount = (id) => {
        let selected = shopList.find(item => item.id === id)
        return selected ? selected.count : 0
    }
    const handleFail = (e) => {
        console.log(e)
    }
    const toggleModal = (modalVisible, item) => {
        setModalVisible(modalVisible)
        setModalData(item)
    }
    const handleSkuAdd = (item, skuList) => {
        props.handleSkuAdd(item, skuList)
        setModalVisible(false, [])
    }
    return (
        <View style={styles.container}>
            <SectionList
                ref={(ref) => { sectionList = ref }}
                sections={goodsList}
                onScrollToIndexFailed={handleFail}
                keyExtractor={(item, index) => item + index}
                renderItem={({ item }) => <Item toggleModal={toggleModal} count={computeCount(item.id)} item={item} handleShopListChange={handleShopListChange} />}
                renderSectionHeader={({ section: { name } }) => <Text style={styles.header}>{name}</Text>}
            />
            <SkuModal handleSkuAdd={handleSkuAdd} modalData={modalData} modalVisible={modalVisible} toggleModal={toggleModal} />
        </View>
    )
}

const styles = StyleSheet.create({
    itemRight: {
        flexDirection: 'column',
        paddingLeft: 10,
        justifyContent: 'space-between',
        flex: 1,
    },
    itemName: {
        fontSize: 17,
    },
    itemPriceContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    itemPrice: {
        color: '#6da749',
        fontSize: 17
    },
    itemCover: {
        width: 90,
        height: 90,
        borderRadius: 10,
    },
    container: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    item: {
        backgroundColor: '#fff',
        paddingBottom: 10,
        paddingTop: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
        flexDirection: 'row'
    },
    header: {
        fontSize: 15,
        backgroundColor: '#fff',
        height: 30,
        textAlignVertical: 'center',
        lineHeight: 30
    },
    title: {
        fontSize: 22,
    },
})